👍 would be great to see this merged, quite a few libraries use .cjs (e.g. @apollo/client), so the current webpack config can cause weird module import failures depending on what you're doing. The alternative is to use something like craco to monkey-patch the webpack config, but that's obviously not ideal.

@jenseng Second that! This is also affecting the very popular file uploader package uppy and all its sub-packages (@uppy/react, @uppy/dashboard, @uppy/aws-s3, @uppy/drag-drop) to name a few.

This PR successfully fixes the issue for my project.
Shouldn't this be prioritised, @iansu? Looks like a common issue.

Would love if this gets merged in as it solves issues with a lot of libs

Would be great to have this merged in.

In the meantime, it's possible to continue using .cjs modules with react-app-rewired:

// config-overrides.js
module.exports = {
  webpack: function (config, env) {
    config.module.rules = config.module.rules.map(rule => {
      if (rule.oneOf instanceof Array) {
        rule.oneOf[rule.oneOf.length - 1].exclude = [/\.(js|mjs|jsx|cjs|ts|tsx)$/, /\.html$/, /\.json$/];
      }
      return rule;
    });
    return config;
  },
}

Guys, any update on this ?

This solved our issue in solana-labs/oyster#538 - it would be great to have this merged! 🙏

Any update? This is a blocker!

Looking forward to someone finally fixing this.

We need this as well and it's really important for our team, @UPPY doesn't work without a .cjs support and potentially @apollo/client in the future. Please review this and merge.

Hey @nyatskiv
I got uppy working by doing the following as a stopgap before they merge this

Install these packages

npm i react-app-rewired --save-dev
npm i customize-cra  --save-dev

Update your build and start scripts

  "scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
  }

Create a config-overrides.js file with the following contents

//@ts-ignore
const {
  override,
  addWebpackModuleRule,
  setWebpackTarget,
} = require("customize-cra");

module.exports = override(
  addWebpackModuleRule({
    test: /\.(cjs)$/,
    exclude: /@babel(?:\/|\\{1,2})runtime/,
    loader: require.resolve("babel-loader"),
    options: {
      babelrc: false,
      configFile: false,
      compact: false,
      presets: [
        [
          require.resolve("babel-preset-react-app/dependencies"),
          { helpers: true },
        ],
      ],
      cacheDirectory: true,
      cacheCompression: false,
      sourceMaps: true,
      inputSourceMap: true,
    },
  })
);

+1 Hoping this will be reviewed and merged. This fixes an issue I'm having and I believe this would fix #12155.

    config.module.rules = config.module.rules.map(rule => {
      if (rule.oneOf instanceof Array) {
        rule.oneOf[rule.oneOf.length - 1].exclude = [/\.(js|mjs|jsx|cjs|ts|tsx)$/, /\.html$/, /\.json$/];
      }
      return rule;
    });

You are my new favorite internet stranger @nyan-left! I've spent all afternoon fighting with this trying to figure out why my dependency importing axios wasn't working!

Thanks a lot, hopefully this can get merged in to fix it properly ASAP.

I also would love for this to be reviewed and merged. 🙏

    config.module.rules = config.module.rules.map(rule => {
      if (rule.oneOf instanceof Array) {
        rule.oneOf[rule.oneOf.length - 1].exclude = [/\.(js|mjs|jsx|cjs|ts|tsx)$/, /\.html$/, /\.json$/];
      }
      return rule;
    });

You are my new favorite internet stranger @nyan-left! I've spent all afternoon fighting with this trying to figure out why my dependency importing axios wasn't working!

Thanks a lot, hopefully this can get merged in to fix it properly ASAP.

Same here, importing axios@1.3.3 as require('axios') inside a dependency is not working. It's returning some path string instead of the actual module, causing axios_1.default to be undefined.

I could work around this by adding CRACO to my project, with the configuration suggested here: #11889 (comment).

Is there any estimated ETA for merging this PR, so we can just use latest react-scripts and axios versions out of the box?

This PR has been kicking around for a year, and it clearly solves a known issue. What's blocking the progress here? 😖

It, and several other PRs doing the same thing, seem like they would effectively solve #12700.

Ran into this issue today, I'm glad I was able to eventually find this PR and learn about the root cause + workarounds. But like the previous commenter, I'm also wondering what is blocking the PR for so long. This seems like a good solution for an issue that has been reported multiple times by now.

I think we need to give up on create react app, it looks like they are not supporting it anymore with the new docs anyway.

If you have a look at my comment from 9 months ago there is a way to use rewire to solve the issue

it looks like they are not supporting it anymore with the new docs anyway.

@nigelheap, can you expand on what you mean? Or link to where in the docs it says that they are not supporting (and what they're note supporting)?

@nigelheap, can you expand on what you mean? Or link to where in the docs it says that they are not supporting (and what they're note supporting)?

@laustdeleuran The new react docs don't mention using create react app.
https://react.dev/learn/start-a-new-react-project basically says to use a framework or use Vite or Percel.

Specific part about not using a framework https://react.dev/learn/start-a-new-react-project#can-i-use-react-without-a-framework

Hello from 2023, burned a few hours on this frustrating issue! Any chance of getting this merged?

I'm also having this issue.

@zpao sorry for the direct hit. But can you help merging this? Thank you

It is sad that this has not been sorted after 1 year of collective frustration - what is up?

I'm still hopping this gets merge :/

This issue is still breaking otherwise correctly written packages used within CRA projects (e.g. 101arrowz/fflate#193). .cjs has been part of Node's module resolution system for a few years now, so I'd have hoped CRA would support it. Is there anything else that needs to be done for this to be merged?

My take here is that CRA is now abandonware and we should either eject, or migrate to other providers like vite.